<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
    }

    .container1 {
      height: 200px;
    }

    .container2 {
      height: 200px;
    }

    .container3 {
      height: 200px;
    }

    .container1 .box1 {
      background: red;
      display: block;
    }

    .container1 .box2 {
      background: blue;
      display: none;
    }

    .container1 .box3 {
      background: yellow;
      display: none;
    }

    .container2 .box1 {
      background: red;
      display: block;
    }

    .container2 .box2 {
      background: blue;
      display: none;
    }

    .container2 .box3 {
      background: yellow;
      display: none;
    }

    .container3 .box1 {
      background: red;
      display: block;
    }

    .container3 .box2 {
      background: blue;
      display: none;
    }

    .container3 .box3 {
      background: yellow;
      display: none;
    }
  </style>
</head>

<body>
  <div class="container1">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  <div class="container2">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <button class="next">点击我切换第二个选线卡下一页</button>

  <div class="container3">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <script>
    // 一个选项卡 ，随便写 ，按照事物发展的顺序书写代码 ，面向过程，注重过程；
    // 构造函数
    function Tab (btns, divs) {
      this.btns = btns
      this.divs = divs
      // 共性问题 所有的按钮 绑定点击事件
      this.btns.forEach((item, key) => {
        item.onclick = () => {
          this.forDiv(key);
        }
      })
    }

    Tab.prototype.forDiv = function (key) {
      // console.log(this.divs); // 这里不能变成箭头函数 因为箭头函数没有this指向
      this.divs.forEach((div, k) => {
        if (key === k) {
          // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
          div.style.display = "block";
        } else {
          // 把和点击按钮不同的 div 隐藏起来
          div.style.display = "none";
        }
      })
    }

    // 多个选项卡 ，提高复用性， 函数封装 ；
    let btns = document.querySelectorAll(".container1 button");
    let divs = document.querySelectorAll(".container1 div");
    new Tab(btns, divs);

    let btn2s = document.querySelectorAll(".container2 button");
    let div2s = document.querySelectorAll(".container2 div");
    let tab2 = new Tab(btn2s, div2s);
    let nextBtn = document.querySelector(".next");

    let tabKey = 0;
    // 点击下一个按钮
    nextBtn.onclick = function () {
      tabKey == 2 ? tabKey = 0 : tabKey++
      tab2.forDiv(tabKey);
    }


    let btn3s = document.querySelectorAll(".container3 button");
    let div3s = document.querySelectorAll(".container3 div");
    let tab3 = new Tab(btn3s, div3s);
    let num = 0;
    setInterval(() => {
      num == 2 ? num = 0 : num++
      tab3.forDiv(num);
    }, 1000)

    /* 
    此案例思路:
    1. 共性事件是 所有按钮都有点击事件  获取所有的按钮绑定事件 
    2. 给构造函数的原型绑定切换事件
    3. 再写下一个按钮 和定时器
    共性问题 放在 类里 
    特性问题 放在对象里处理
    要注意的地方是 this指向问题 function和箭头函数的this 
    */

    // 定义一个类 ，实例化2只狗 ，特性 名称  性别  ，会叫 。 其中有只 小狗 间隔 2秒叫一次

    // 所有狗类 共性特征；
    function Dog (name, sex) {
      this.name = name;
      this.sex = sex;
    }
    // 每个原型都有一个固有属性 constructor 会执行 构造器 ；
    // 会覆盖了之前的constructor 

    Dog.prototype.call = function () {
      console.log("wo wo !!");
    }

    // 特征 ：分开处理

    let dahuang = new Dog("大黄", "公");
    dahuang.call();
    console.log(dahuang.constructor === Dog);

    let xiaohei = new Dog("小黑", "公");
    // 间隔一段时间 
    setInterval(() => {
      xiaohei.call();
    }, 1000)









  </script>
</body>

</html>